<template>
  <transition name="page">
    <div class="wrapper">
      <component-back :title="title"></component-back>
      <component-scroll ref="scroll"
                        class="scroll"
                        :data="list">
        <div class="scroll-content">
          <ul class="order-list">
            <li class="order-item"
                v-for="item of list"
                :key="item.id">
              <h4 class="order-number"
                  border-bottom-dotted-1px>订单编号：{{item.order_no}}</h4>
              <div class="order-detail"
                   border-bottom-dotted-1px>
                <div class="product-name detail">
                  <div class="nav">商品名称</div>
                  <div class="content">{{item.product_name}}</div>
                </div>
                <div class="pay-number detail">
                  <div class="nav">支付金额</div>
                  <div class="content">{{item.payed_amount}}</div>
                </div>
                <div class="order-time detail">
                  <div class="nav">下单时间</div>
                  <div class="content">{{item.create_at}}</div>
                </div>
                <div class="pay-time detail">
                  <div class="nav">付款时间</div>
                  <div class="content">{{item.payed_at}}</div>
                </div>
              </div>
              <div class="pay-state pay-succ"
                   v-if="item.status===1">
                支付成功
              </div>
              <div class="pay-state"
                   v-else
                   @click="handlePay(item.order_no)">
                重新支付
              </div>
            </li>
          </ul>
        </div>
      </component-scroll>
    </div>
  </transition>
</template>

<script>
import ComponentBack from 'common/back'
import ComponentScroll from 'common/scroll'
import base from '@/api/base'
export default {
  name: 'MeOrder',
  components: {
    ComponentBack,
    ComponentScroll
  },
  data () {
    return {
      title: '订单中心',
      list: []
    }
  },
  methods: {
    getOrderData () {
      this.$api.person.getOrderData()
        .then(this.getOrderSucc)
    },
    getOrderSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      const LOGIN_CODE = this.$api.LOGIN_CODE
      res = res.data
      if (res.code === CODE_OK && res.data) {
        const data = res.data
        this.list = data.order
      } else if (res.code === LOGIN_CODE) {
        this.$reLogin()
      }
    },
    handlePay (num) {
      const url = `${base.pro}/wap/payment-${num}.html`
      window.location.href = url
    }
  },
  created () {
    this.$nextTick(() => {
      this.getOrderData()
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  position absolute
  z-index 10
  top 0
  left 0
  bottom 0
  right 0
  background-color $space
  touch-action none

.scroll
  top 0

  .order-list
    width 100%
    padding-top 88px

    .order-item
      padding()
      background $common_bgc
      width 100%
      margin-bottom 20px

      .order-number
        font-size $address
        font-weight 500
        color $common_fz_color
        line-height 86px

      .order-detail
        padding-top 12px
        padding-bottom 12px
        box-sizing border-box

        .detail
          display flex
          align-items center

          .nav
            font-size $shop_name
            font-weight 500
            color $original_price
            margin-right 48px
            line-height 58px

          .content
            font-size $shop_name
            font-weight 500
            color $order_content

      .pay-state
        line-height 90px
        font-size 32px
        font-weight bold
        color $order_content
        text-indent 320px

      .pay-succ
        color $pay_succ

.page-enter-active, .page-leave-active
  transition all 0.3s

.page-enter, .page-leave-active
  transform translate3d(100%, 0, 0)
</style>
